import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Autoplay, Navigation, EffectFade } from "swiper";
import { Col, Container, Row } from "react-bootstrap";
import SliderData from "@/data/slider";

SwiperCore.use([Autoplay, Navigation, EffectFade]);

const Slider = (props) => {
    const mainSlideOptions = {
        spaceBetween: props.space,
        slidesPerView: props.perview,
        autoHeight: true,
        loop: true,
        effect: props.effect,
        navigation: {
            nextEl: "#main-slider-next",
            prevEl: "#main-slider-prev"
        },
        autoplay: {
            delay: props.time
        }
    };
    return (
        <section className="main-slider">
            <Swiper {...mainSlideOptions}>
                {props.data.map(({ image, subText, title, button }, index) => (
                    <SwiperSlide key={index}>
                        <div
                            className="image-layer"
                            style={{ backgroundImage: `url(${image})` }}
                        ></div>
                        <div className="thm-container">
                            <Row>
                                <Col lg={12} className="text-center">
                                    <p className="main-slider__subtext">{subText ? subText : ""}</p>
                                    <h3 className="main-slider__title">{title ? title : ""}</h3>
                                    {button ?
                                        <Link href={button.url ? button.url : "#"}>
                                            <a className={`btn btn-warning`}>
                                                <span>{button.label ? button.label : ""}</span>
                                            </a>
                                        </Link>
                                        :
                                        ""
                                    }
                                </Col>
                            </Row>
                        </div>
                    </SwiperSlide>
                ))}
                <div className="swiper-button-prev" id="main-slider-prev">
                    <i className="fa fa-angle-left"></i>
                </div>
                <div className="swiper-button-next" id="main-slider-next">
                    <i className="fa fa-angle-right"></i>
                </div>
            </Swiper>
        </section>
    );
};

Slider.defaultProps = {
    space: 0,
    perview: 1,
    time: 3000,
    effect: "fade",  //fade|cube|coverflow(多图)|flip
    data: SliderData
}
export default Slider;
